<template>
  <view class="home-box" :class="show?'show':''">
    <!--轮播背景-->
    <view class="swiper-background-box " :class="[show?'show':'']">
      <block v-for="(item,index) in list_data" :key="index">
        <view class="swiper-background" :style="[{backgroundImage:'url('+ item.background +')'}]"
              :class="index == currentBackground?'show':''"></view>
      </block>
    </view>
    <view class="head-search-box"  :style="[{backgroundColor:'rgba(30, 144, 255,'+ headTab.opacity +')'}]">
      <view class="text-center text-white small-routine-title">首页</view>
      <!--搜索框-->
      <view class="cu-bar search search-box">
        <view class="search-form round" @tap="searchTap">
          <text class="cuIcon-search"/>
          <text>iphone15</text>
        </view>
      </view>
    </view>
    <!--中间内容区域-->
    <view class="view-content show" >
      <!--轮播图-->
      <view class="swiper-box">
        <swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" @change="swiperChange"
                :autoplay="true" interval="5000" duration="500">
          <swiper-item v-for="(item,index) in swiperList" :key="index">
            <image :src="imgUrl + item.image" mode="aspectFill" ></image>
          </swiper-item>
        </swiper>
      </view>
      <!--滑动菜单-->
      <menu-list :list_data='gridMenuData' @listTap='gridMenuTap'/>
      <!--推荐商品-->
      <view class="content " style="display: block;" >
        <view class="slide__box">
          <view class="title">
            <view style="display: flex;">
              <view>推荐商品</view>
              <text class="sub__title travel-line">好货推荐</text>
            </view>
          </view>
          <scroll-view :scroll-x="true" :show-scrollbar="false">
            <view class="list">
              <view class="item" v-for="(item,index) in activity_goods" :key="index" @click="clickGoods(item)">
                <view class="imgBox">
                  <image class="img" :src="imgUrl+item.add_file" mode="widthFix"></image>
                </view>
                <view style="width: 100%;overflow: hidden;;white-space: nowrap;text-overflow: ellipsis;text-align: center;font-size: 24rpx;padding-top: 6rpx;">
                  {{item.name}}
                </view>
                <view class="priceBox" >
                  <view class="price" :style="{'color':themeColor}" style="font-weight: bold;">
                    <view class="small">￥</view>
                    <view>
                      {{item.day_price?parseFloat(item.day_price):'-'}}/天
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <!--商品tab-->
      <view class="goods-tab-box">
        <scroll-view scroll-x class="nav y margin-tb-sm">
          <view class="flex text-center">
            <block v-for="(item,index) in goodsTabData.list" :key="index">
              <view class="cu-item flex-sub " :class="index==goodsTabData.TabCur?'select':''" @tap="goodsTab(item,$event)" :data-id="index">
                <view class="cu-tag badge y bg-gradual-pink" v-if="item.tag">{{item.tag}}</view>
                <view :class="index == goodsTabData.TabCur?'text-blue':''">{{item.name}}</view>
                <view class="tab-dot bg-blue"/>
              </view>
            </block>
          </view>
        </scroll-view>
      </view>
      <view class="tab-list">
        <!--商品列表-->
        <goods-list :list_data="goodsData" @listTap="goodsListTap" />
      </view>
      <!--占位底部距离-->
      <view class="cu-tabbar-height"/>
    </view>
  </view>
</template>

<script>
import MenuList from "./menu-list";
import GoodsList from "./goods-list";
import { mapState } from 'vuex'
import {getGoods} from "../../common/http";
export default {
  name: "home",
  components:{
    MenuList,
    GoodsList,
  },
  computed:{
    ...mapState(['imgUrl'])
  },
  data(){
    return{
      list_data:[
        {
          swiper: '/static/images/home/swiper/swiper-1.png',
          background: '/static/images/home/swiper/swiper-background-1.png',
        },
        {
          swiper: '/static/images/home/swiper/swiper-2.png',
          background: '/static/images/home/swiper/swiper-background-2.png',
        },
        {
          swiper: '/static/images/home/swiper/swiper-3.png',
          background: '/static/images/home/swiper/swiper-background-3.png',
        }
      ],
      swiperList :[],
      current:0,
      currentBackground:0,
      headTab:{
        opacity:0
      },
      gridMenuData:[],
      goodsTabData: {
        TabCur: 0,
        id:0,
        list: [
          {
            id:0,
            name: '全部',
            tag: ''
          }
        ]
      },
      goodsData:[],
      page:1,
      pageSize:10,
      nomore: true,
      activity_goods:[],
      themeColor:'#fe711c',//f39700
    }
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    scrollY: {
      type: Number,
      default: 0
    },
    scrollBottom: {
      type: Number,
      default: 0
    }
  },
  created() {
    this.$api.banner({}).then((res)=>{
      if(res.data.code == 0){
        this.swiperList = res.data.data;
      }
    })
    this.$api.getMold().then((res)=>{
      if(res.data.code == 0){
        this.gridMenuData = res.data.data;
      }
    })
    this.$api.getMoldTwo({mold_id:0}).then((res)=>{
      if(res.data.code == 0){
        this.goodsTabData.list = this.goodsTabData.list.concat(res.data.data);
        this.getGoodsList(this.goodsTabData.list[0].id);
      }
    })
    this.recommended();
  },
  watch: {
    scrollY() {
      //通知他妈的滚动了。
      this.setPageScroll(this.scrollY);
    },
    scrollBottom() {
      if(this.scrollBottom != 0) {
        //通知他妈的触底了
        this.setReachBottom();
      }
    },
  },
  methods:{
    recommended(){
      getGoods({
        type: 3,
        page:this.page,
        pageSize:this.pageSize
      }).then((res)=>{
          this.activity_goods = res.data.data.goodsList
      });

    },
    getGoodsList(id){
      getGoods({
        brand_id:id,
        page:this.page,
        pageSize:this.pageSize
      }).then((res)=>{
          if(res.data.code == 0){
            if(this.goodsData.length >= res.data.data.count){
              // 锁定 没有更多数据
              this.nomore = false
            }else{
              this.goodsData = this.goodsData.concat(res.data.data.goodsList);
            }
          }
      })
    },
    //触底了
    setReachBottom() {
      if (this.nomore) {
        this.addRandomData();
      }

    },
    addRandomData() {
      this.page++;
      this.getGoodsList(this.goodsTabData.id);
    },
    //页面被滚动
    setPageScroll(scrollTop) {
      if(scrollTop <= 100) {
        let num = scrollTop / 100;
        this.headTab.opacity = num;
      } else if(scrollTop > 100) {
        this.headTab.opacity = 1;
      }
    },
    swiperChange(e) {
      if(e.detail.current > 2){
        this.currentBackground = 0;
      }else{
        this.currentBackground = e.detail.current;
      }
      this.current = e.detail.current;
    },
    searchTap() {
      uni.navigateTo({
        url: "/sub_pages/home/search"
      });
    },
    gridMenuTap(e) {
      this.$emit('menuTop', {
        data:e.data
      });
    },
    goodsTab(item,e) {
      this.goodsTabData.TabCur = e.currentTarget.dataset.id;
      this.goodsTabData.id = item.id;
      this.pageSize = 10;
      this.page = 1;
      this.goodsData = [];
      this.getGoodsList(item.id)
    },
    goodsListTap(e) {
        uni.navigateTo({
          url: '/sub_pages/detail/detail?id='+e.data.id + '&type='+e.data.type
        });
    },
    clickGoods(e) {
      uni.navigateTo({
        url: '/sub_pages/detail/detail?id='+e.id + '&type='+e.type
      });
    }
  }
}
</script>

<style scoped>
.home-box {
  display: none;
}
.home-box.show {
  display: block;
}
.head-search-box {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
  background-color: rgba(229, 77, 66, 0);
  padding-top: calc(var(--status-bar-height) + var(--status-bar-height));
  transition: top .25s;
  padding-bottom: 10 rpx;
}
.search-box {
  position: relative;
}
.small-routine-title {
  padding: 18.18rpx 0;
}
.swiper-background-box {
  position: absolute;
  height: 348rpx;
  width: 100%;
  top: 0;
  display: none;
  transition: 0s;
}
.swiper-background-box.show {
  display: block;
  transition: 0s;
}
.swiper-background {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  background-size: cover;
  transition: opacity .25s;
}
.swiper-background.show {
  opacity: 1;
  transition: opacity .25s;
}
.view-content {
  display: none;
  width: 100%;
  margin-top: calc(var(--status-bar-height) + 230rpx);

}
.view-content .tab-list {
  position: relative;
  width: 100%;
}
.view-content.show {
  display: block;
}
.swiper-box {
  width: 100%;
  padding: 0 25rpx;
}
.screen-swiper {
  height: 230rpx;
  min-height: 230rpx;
  border-radius: 15rpx;
}
.swiper-padding {
  padding: 0 25rpx;
}
.goods-tab-box {
  position: sticky;
  padding: 2rpx 0;
  transition: all .25s;
  z-index: 9999;
  background: #fff;
  top: calc(var(--status-bar-height) + 215rpx);
}
.cu-tag.y {
  top: 0px;
  right: -32.72rpx;
  font-size: 20rpx;
  padding: 19rpx 6rpx;
  transform: scale(0.8);
}
.content {
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}
</style>
<style lang="scss" scoped>
// 侧滑商品
.slide__box {
  width: 100%;
  padding: 0 24rpx 24rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  .title {
    width: 100%;
    font-size: 34rpx;
    line-height: 34rpx;
    font-weight: 700;
    text-align: center;
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    color: #333;
    .sub__title {
      color: #999;
      font-size: 24rpx;
      font-weight: 400;
      padding-left: 24rpx;
      padding-right: 20rpx;
    }
    .more{
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #333;
    }
    .cd{
      display: flex;
      align-items: center;

    }
  }

  .list{
    display: flex;
    align-items: center;
    .item {
      background-color: #fff;
      width: 160rpx;
      height: 260rpx;
      // width: 150rpx;
      // height: 230rpx;
      border-radius: 6rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex-shrink: 0;
      margin-right: 18rpx;
      .imgBox {
        width: 100%;
        // width: 150rpx;
        // height: 150rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        .img {
          // max-width: 150rpx;
          // max-height: 150rpx;
          max-height: 180rpx;
          display: block;
        }
      }
      .priceBox {
        max-width: 150rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .price {
          display: flex;
          align-items: flex-end;
          padding: 10rpx 0 8rpx;
          box-sizing: border-box;
          font-size: 28rpx;
          line-height: 28rpx;
          color: #eb0909;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          .small {
            font-size: 24rpx;
            line-height: 24rpx;
            transform: scale(.8);
            transform-origin: 0 50%;
          }
        }
      }
    }
  }
}
</style>